<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<script src="./vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<style>
	.animated-banner{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: hidden;
		height: 156px;
	}
	.layer{
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
	.morning{
		margin-left: 100px;
	}
	.afternoon{
		margin-left: 100px;
	}
	.snowball{
		margin-left: 200px;
	}
	.evening{
		margin-left: 100px;
	}
	.window{
		margin-left: 100px;
	}
</style>
<body>
	<div id="app">
		<div class="animated-banner">
			<!-- <div class="layer">
				<img class="morning" src="https://i0.hdslb.com/bfs/vc/d324162958c6a40bd0b37eb885ce1159aebdee72.jpg"  height="156" width="2029">
			</div>
			<div class="layer">
				<img class="afternoon" src="https://i0.hdslb.com/bfs/vc/c60fe2b9198b5e5bff2a95984e6e4713d437850a.jpg"  height="156" width="2029" >
			</div> -->
			<div class="layer">
				<video id="videoID" class="evening" controls="controls" height="156" width="2029" style="object-fit: cover;">
					<source src="./d68b6844-84da-47e0-a3b1-e710b9e250c0.webm" type="video/webm"/> 
				</video>	
			</div>
			<canvas width="2029" height="156" style="position: absolute; top: 0px; left: 0px;"></canvas>
		</div>
	</div>
	
</body>
<script>
	var eve=document.getElementById('videoID');  //获取，函数执行完成后local内存释放
	eve.autoplay = true; // 自动播放
	eve.loop = true; // 循环播放
	eve.muted=true; // 关闭声音，如果为false,视频无法自动播放
	function clamp(x){
		// if(x<min) return min;
		// if(x>max) return max;
		return x/1000;
	}
	function afnop(x){
		if(850<x) return 1;
		if(x<400) return 0;
		return (x-400)/450;
	}
	function vop(x){
		if(x>1500) return 1;
		if(x<1150) return 0;
		return (x-1150)/350;
	}
	document.onmousemove = function(event){
		var x = event.pageX;
		var vdeo = document.getElementById("videoID");
		vdeo.setAttribute("style","transform:translate(" + -x/20 + "px, 0px);");
	}

	
</script>
</html>